<template>
<a-layout-content class="editor-container">
  <a-row>
    <a-col :span="6">
      <a-card title="组件列表">
        <div class="container">
          <components-list
              :components="defaultTextTemplates"
              @onItemClick="addItem"
          />
        </div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="画布区域">
        <div class="container">
          <div class="editor"
               :style="page.props">
            <history-area></history-area>
            <edit-wrapper
                v-for="component in components"
                :id="component.id"
                :key="component.id"
                :props="component.props"
                @set-active="setActive(component.id)"
                @update-position="updatePosition"
                :active="currentElement && currentElement.id === component.id"
            >
              <component
                  class="component"
                  :is="component.name"
                  :props="component.props"
              />
          </edit-wrapper>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-tabs type="card">
        <a-tab-pane key="component" tab="属性设置" class="no-top-radius">
          <div v-if="currentElement && currentElement.props" class="container">
            <edit-group
                v-if="!currentElement.isLocked"
                :props="currentElement.props"
                @change="handleChange"
                class="props-container"
            ></edit-group>
            <a-empty v-else>
              <template #description>
                <p>该元素被锁定，无法编辑</p>
              </template>
            </a-empty>
          </div>
        </a-tab-pane>
        <a-tab-pane key="layer" tab="图层设置">
          <div class="container">
          <layer-list
              :list="components"
              :selectedId="currentElement && currentElement.id"
              @change="handleChange"
              @remove="removeItem"
              @select="setActive"
              class="props-container"
          ></layer-list>
          </div>
        </a-tab-pane>
        <a-tab-pane key="page" tab="页面设置">
          <div class="container">
          <props-table :props="page.props" @change="pageChange"
                       class="props-container"></props-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-col>
  </a-row>
</a-layout-content>
</template>

<script lang="ts">
// 使用setup语法糖就无法动态加载组件
import useEditorStore from "@/store/editor.ts";
import LText from "@/components/LText.vue";
import LImage from "@/components/LImage.vue";
import {computed, defineComponent} from "vue";
import ComponentsList from "@/components/ComponentsList.vue";
import defaultTextTemplates from "@/defaultTemplates.ts";
import EditGroup from "@/components/EditGroup.vue";
import StyledUploader from "@/components/StyledUploader.vue";
import {ComponentData} from "@/types/editor.ts";
import LayerList from "@/components/LayerList.vue";
import PropsTable from "@/components/PropsTable.vue";
import EditWrapper from "@/components/EditWrapper.vue";
import initHotKeys from "@/plugins/hotKeys.ts";
import HistoryArea from "@/views/editor/HistoryArea.vue";

export default defineComponent({
  components: {
    HistoryArea,
    PropsTable,
    LayerList,
    LImage,
    StyledUploader,
    EditGroup,
    ComponentsList,
    LText,
    EditWrapper,
  },
  setup() {

    initHotKeys()

    const editorStore = useEditorStore()
    const components = computed(() => editorStore.components)
    const currentElement = computed(() => editorStore.currentElement)
    const page = editorStore.page

    const addItem = (component: ComponentData) => {
      editorStore.addComponent(component)
    }
    const setActive = (id: string) => {
      editorStore.setActiveComponent(id)
    }
    const handleChange = (e: any) => {
      editorStore.updateComponent(e)
    }
    const removeItem = (id: string) => {
      editorStore.removeComponent(id)
    }
    const pageChange = (e: any) => {
      editorStore.updatePage(e)
    }
    const updatePosition = (data: {left: number, top: number, width: number, height: number, id: string}) => {
      editorStore.updateComponent({
        id: data.id,
        key: ['left', 'top', 'width', 'height'],
        value: [data.left,  data.top, data.width, data.height],
        isRoot: false
      })
    }

    return {
      components,
      currentElement,
      page,
      defaultTextTemplates,
      addItem,
      setActive,
      handleChange,
      removeItem,
      pageChange,
      updatePosition,
    }
  }
})
</script>

<style>
.editor-container{
  .container{
    height: calc(100vh - 230px);
    display: flex;
    justify-content: center;
    overflow-y: scroll;
    .editor {
      width: 580px;
      position: relative;
      border: 1px solid #cccccc;
      border-radius: 8px;
      .component{
        position: static !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
    .props-container{
      width: 90%;
    }
  }
  .ant-tabs-nav{
    height: 56px !important;
  }
}
</style>